<template>
    <el-main>
        <el-row :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <div class="row">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-radio-group v-model="limitSort" size="medium" @change="changeLimitSortCharts">
                                <el-radio border label="1">前三</el-radio>
                                <el-radio border label="2">前十</el-radio>
                                <el-radio border label="3">全部</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-radio-group v-model="resource" size="medium" @change="changeResourceCharts">
                                <el-radio border label="1">一周</el-radio>
                                <el-radio border label="2">一月</el-radio>
                                <el-radio border label="3">三月</el-radio>
                                <el-radio border label="4">半年</el-radio>
                                <el-radio border label="5">一年</el-radio>
                                <el-radio border label="6">全部</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="row">
                    <charts class="chart" :options="chartOptions"></charts>
                </div>
            </el-card>
        </el-row>
    </el-main>
</template>
<script>
    export default {
        data() {
            return {
                limitSort: '1',
                resource: '1',
                chartOptions: {
                    chart: {
                        type: 'packedbubble',
                        height: '100%'
                    },
                    title: {
                        text: '活跃度分析'
                    },
                    tooltip: {
                        useHTML: true,
                        pointFormat: '<b>{point.name}:</b> {point.y}'
                    },
                    plotOptions: {
                        packedbubble: {
                            minSize: '30%',
                            maxSize: '120%',
                            zMin: 0,
                            zMax: 1000,
                            layoutAlgorithm: {
                                gravitationalConstant: 0.05,
                                splitSeries: true,
                                seriesInteraction: false,
                                dragBetweenSeries: true,
                                parentNodeLimit: true
                            },
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}',
                                // filter: {
                                //     property: 'y',
                                //     operator: '>',
                                //     value: 250
                                // },
                                style: {
                                    color: 'black',
                                    textOutline: 'none',
                                    fontWeight: 'normal'
                                }
                            }
                        }
                    },
                    series: []
                },
            }
        },
        created() {
            this.activityCharts()
        },
        methods: {
            changeResourceCharts(label) {
                this.resource = label
                this.activityCharts()
            },
            changeLimitSortCharts(label) {
                this.limitSort = label
                this.activityCharts()
            },
            activityCharts() {
                const _this = this
                const params = {
                    limitType: _this.limitSort,
                    dateType: _this.resource
                }
                _this.axios.post(_this.$API.ZHIHUAPI.activityCharts, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.chartOptions.series = res.data
                        } else {
                            _this.chartOptions.series = []
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.chartOptions.series = []
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.chartOptions.series = []
                })
            }
        }
    }
</script>

<style scoped>
</style>
